<template>
  <view class="categoryList">
    <swiper
      indicatorColor="#999"
      indicatorActiveColor="#333"
      class="swiper-container"
      :current="current"
      :circular="isCircular"
      :autoplay="isAutoplay"
      :indicatorDots="hasIndicatorDots"
    >
      <swiper-item
        class="categories"
        v-for="viewList in groupList"
        :key="viewList[0].id"
      >
        <view class="item" v-for="item in viewList" :key="item.id">
          <image
            @tap="() => goToCategory(item.id)"
            :src="item.iconUrl"
            class="image"
          />
          <view class="itemName">
            {{ item.name }}
          </view>
        </view>
      </swiper-item>
      <!-- <view v-show="list.length > 5" class="item" @tap="toggleOpenMore()">
        <image
          src=""
          class="image"
        />
        <view> {{ openMore ? "收起" : "更多" }}</view>
      </view> -->
    </swiper>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";

export default {
  data() {
    return {
      current: 0,
      isCircular: false,
      isAutoplay: false,
      hasIndicatorDots: true,
      // openMore: false,
    };
  },
  computed: {
    groupList() {
      let groupList = new Array();
      this.list.reduce((groupListItem, item, index) => {
        groupListItem.push(item);
        console.log("push", groupList, groupListItem);
        if (groupListItem.length === 5) {
          groupList.push(groupListItem.concat([]));
          console.log("5", groupList, groupListItem);
          return new Array();
        }
        if (index === this.list.length - 1) {
          groupList.push(groupListItem.concat([]));
          console.log("last", groupList, groupListItem);
          return new Array();
        }
        return groupListItem;
      }, new Array());
      console.log("categoryList", this.list, "groupList", groupList);
      return groupList;
    },
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // toggleOpenMore() {
    //   this.openMore = !this.openMore;
    // },
    goToCategory(id) {
      console.log("goToCategoryId", id);
      Taro.navigateTo({
        url: `/pages/sales/category/index?category=${id}`,
      });
    },
  },
};
</script>
